<template>
	<view>
		
		<view class="" style="position: relative;height: 500rpx;">
			<u-navbar
                height="50"
                placeholder
				leftIcon=" "
				:fixed="true"
				title="登录"
                :autoBack="false"
                :titleStyle="{ fontSize: '36rpx',color:'#fff' }"
                leftIconColor="#f7f4f2"
                bgColor="transparent"
            >
            </u-navbar>
			<image src="../../static/imgs/loginban.png" mode="" style="width: 100%;height:100%;position: absolute;left: 0;top: 0;">
			</image>
			<!-- <text class="text-ban" style="position: absolute;left: 0;bottom: 40%;margin-left: 50rpx;">您好，欢迎使用
				融媒体中心服务平台~</text> -->
			<view style="color: #fff;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;flex-direction: column;">
				<text style="font-size: 40rpx;">临沧市广播电视融合媒体</text>
				<text style="font-size: 50rpx;">监测监控</text>
			</view>

			<view style="position: absolute;bottom: -150rpx;height: 300rpx;width: 100%;display: flex;align-items: center;justify-content: center;">
				<view class="" style="height:100%;width: 70%;background: #fff;border-radius: 10rpx;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;flex-direction: column;">
					<view style="width: 80%;margin-bottom: 30rpx;">
						<u--input placeholder="请输入账号" border="surround" v-model="user.account"></u--input>
					</view>
					<view style="width: 80%;">
						<u--input placeholder="请输入密码" border="surround" type="password" v-model="user.password"></u--input>
					</view>
					
					
				</view>
				
				
			</view>


		</view>
		<!-- <view class="" style="margin: 110rpx 60rpx 0 60rpx;">
			<u--input placeholder="账号" border="surround" v-model="user.account"></u--input>
		</view>
		<view class="" style="margin: 60rpx 60rpx 120rpx 60rpx;">
			<u--input placeholder="密码" border="surround" type="password" v-model="user.password"></u--input>
		</view> -->


		<view class="" style="width: 70%;margin: 0 auto;margin-top: 200rpx;">
			<!-- <u-button type="primary" @click="login" text="登录"></u-button> -->
			<!-- #ifdef MP-WEIXIN -->
			<u-button type="primary" @click="getOpenId" text="登录"></u-button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<u-button type="primary" @click="login" text="登录"></u-button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<u-button style="margin-top:20rpx;"  @click="exit" text="退出"></u-button>
			<!-- #endif -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					account: '',
					password: ''
				},
				code:''
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.runtime.quit();
			return true //return true的意思是禁止返回到上一个界面
			// #endif
		},
		methods: {
			exit(){
				// #ifdef APP-PLUS
				plus.runtime.quit();
				return true //return true的意思是禁止返回到上一个界面
				// #endif
			},
			login() {
				if(!this.user.account || !this.user.password){
					return this.$u.toast('账号或密码不能为空');
				}
				this.$api.user.login(this.user).then(res => {
					if(res.code == 1){
						this.$u.toast(res.msg);
						let userInfo = res.data.userinfo;
						let token = userInfo.token
						this.$u.vuex('token', token)
						this.$u.vuex('userInfo', userInfo)
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
					
				})
				
			},
			// 微信环境登录，获取open_id再去登录
			async getOpenId(){
				let self = this;
				const js_code = await new Promise((resolve, reject) => {  
					// uni.login非异步，所以用Promise包装  
					uni.login({  
						provider: 'weixin',  
						success: res => {  
							this.code = res.code
							this.user.code = res.code
							console.log('555',res.code);
							resolve(res.code);  
						},  
						fail: err => {  
							console.log({err});
							
							reject(err);  
						}  
					})
				})
				// await new Promise((resolve, reject) => {  
				// 	// uni.login非异步，所以用Promise包装  
				// 	uni.request({
				// 	url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
				// 	success: (data) => {
				// 		this.user.open_id = data.data.openid
				// 		console.log('data.data.openid',data.data.openid);
				// 		resolve(data.data.openid);
				// 	},
				// 	fail: err => {  
				// 			console.log('openiderr',{err});
				// 			reject(err);  
				// 		}  
				// })
				// })
				// await uni.request({
				// 	url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
				// 	success: (data) => {
				// 		this.user.open_id = data.data.openid
				// 		console.log('data.data.openid',data.data.openid);
						
				// 	}
				// })
				this.login()
			},
			
		}
	}
</script>

<style scoped>
	.text-ban {
	 color: #092950;
	 font-family: "PingFang SC";
	 font-size: 40rpx;
	 font-style: normal;
	 font-weight: 500;
	 line-height: 61.6rpx;
	}

</style>